<template>
  <div>
    <top-nav title="首页"></top-nav>
    <nav-bar>
      <nav-bar-item path="#/home" name="首页" img="wylc2.png"></nav-bar-item>
      <nav-bar-item path="#/circle" name="朋友圈" img="logo-friends.png"></nav-bar-item>
      <nav-bar-item path="#/user/center" name="我的91" img="wode911.png"></nav-bar-item>
    </nav-bar>
    <section>
      <!--banner-->
      <div class="banner-wall" style="height:7.5rem;">
        <div class="slick" id="slick">
          <!--banner列表-->
          <slider animation="fade" :control-btn="false">
            <slider-item v-for="(it, index) in banners" :key="index">
              <div>
                <a :href="it.linkUrl">
                  <img :src="it.bannerUrl"/>
                </a>
              </div>
            </slider-item>
          </slider>
        </div>
      </div>

      <!--icon-->
      <div class="bgc inv-new tc">
        <ul class="clearfix">
          <li class="fl">
            <a href="">
              <img src="/static/img/index/new-commer@2x.png" alt="">
              <p>新手专享</p>
            </a>
          </li>
          <li class="fl">
            <a href="">
              <img src="/static/img/index/invite.png" alt="">
              <p>邀请好友</p>
            </a>
          </li>
        </ul>
      </div>

      <!--产品列表-->
      <div class="list bgc" id="bids">
        <a :href="'#/product/list/'+item.borrowTypeCode" class="clearfix" v-for="(item, index) in borrows" :key="item.borrowEid">
          <div class="fl">
            <p class="list-title">{{ item.borrowTitle }}</p>
            <p class="list-left">减少风险,提升收益</p>
          </div>
          <div class="fr">
            <p class="list-int">{{ item.rate }}<span>%</span></p>
            <p class="list-right">年化收益率</p>
          </div>
        </a>
      </div>
    </section>
  </div>
</template>

<script>
  import { Slider, SliderItem } from 'vue-easy-slider'
  import TopNav from '@/components/TopNav'
  import NavBar from '@/components/NavBar'
  import NavBarItem from '@/components/NavBarItem'
  import { base, api, open } from '@/common/constant'

  export default {
    name: 'home',
    data () {
      return {
        banners: [], borrows: []
      }
    },
    mounted (){
      this.getIndex()
    },
    //computed: mapState(['bannerList']),
    methods: {
      getIndex: function () {
        this.$store.dispatch('post', {
          url: api.index,
          ok: open.index,
          fail: base.emptyList,
          that: this
        })
      }
    },
    components: {
      TopNav, NavBar, NavBarItem, Slider, SliderItem
    }
  }
</script>

<style scoped>
  .banner-wall {
    background: #ffffff;
  }
</style>
